<template>
  <div id="header-md" class="padding-md">
    <span class="text-size-md">{{text}}</span>
    <div class="img" v-show="moreshow" @click="leftMenuShow">
      <img src="../assets/images/menu.png" alt="侧边栏">
    </div>
  </div>
</template>

<script>
  export default{
    name:'header-md',
    props:['text','show'],
    computed:{
      moreshow:function(){
        if(this.show == 'y'){
          return true;
        }else{
          return false;
        }
      }
    },
    methods:{
      leftMenuShow:function(){
        this.$store.state.leftmenuShow = true;
        console.log(this.$store.state.leftmenuShow)
      }
    }
  }
</script>

<style lang="less" scoped>
  @import '../assets/css/variables.less';
  #header-md{
    position: relative;
    height:61px;
    line-height: 61px;
    box-shadow: 0px 3px #ddd;
    background:linear-gradient(270deg,@green 0%,@turquoise 100%);
    color:@white;
    padding:0px 20px;
  }
  div.img{
    position: absolute;
    right:20px;
    /*height:25px;*/
    top:0px;
    line-height: 61px;
  }
  div.img img{
    vertical-align: middle;
  }
</style>
